<template>
  <view class="return-list">
    <view v-if="orderList.length === 0" class="noCart">
      <view class="pictrue">
        <view class="default_txt">暂无退货单信息~</view>
      </view>
    </view>
    <view
      class="goodWrapper card"
      v-for="(item, index) in orderList"
      :key="index"
      @click="goDetails(item)"
    >
      <!-- 头部信息flex左右布局 -->
      <view class="order-header-flex">
        <view class="order-header-left">
          <text class="order-no">{{ item.refundOrderNo }}</text>
        </view>
        <view class="order-header-right">
          <slot name="header-action" :item="item">
            <view class="afterSalesType ml20">
              <text
                class="iconfont"
                :class="
                  item.afterSalesType === 1
                    ? 'icon-jintuikuan'
                    : 'icon-tuihuotuikuan'
                "
              />
              <text
                :class="
                  item.afterSalesType === 1 ? 'type-refund' : 'type-return'
                "
              >
                {{ returnType(item.afterSalesType) }}
              </text>
            </view>
          </slot>
        </view>
      </view>
      <view class="divider"></view>
      <!-- 商品信息 -->
      <view class="goods-list">
        <view class="goods-item">
          <image class="goods-img" :src="item.image" mode="aspectFill" />
          <view class="goods-info">
            <view class="goods-title">{{ item.productName }}</view>
            <view class="goods-sku">{{ item.sku }}</view>
          </view>
        </view>
      </view>
      <!-- 状态提示条（仅0/1/3/6） -->
      <view
        v-if="showStatusBar(item)"
        :class="['status-bar', statusBarClass(item)]"
      >
        <template v-if="item.refundStatus === 0">
          配送员审核中 配送服务时间内配送员可审核售后申请
        </template>
        <template v-else-if="item.refundStatus === 1">
          拒绝退款 {{ item.refuseRefundReason || "无拒绝原因描述" }}
        </template>
        <template v-else-if="item.refundStatus === 3">
          退款成功 配送员现场通过用户的退款请求
        </template>
        <template v-else-if="item.refundStatus === 6">
          撤销申请 此退款单已撤销申请
        </template>
        <template v-else-if="item.refundStatus === 7">
          <!-- 待上门 此退款单已待上门 -->
          等待配送员上门中
        </template>
        <template v-else-if="item.refundStatus === 8">
          <!-- 配送员上门中 -->
          配送员上门中 配送上门审核售后申请
        </template>
      </view>
<!-- 预约时间 -->
<view class="door-time" v-if="item.reservationDoorStartTime">
  <view class="door-time-item">
    <text class="door-time-label">预约时间：</text>
    <text class="door-time-value">{{ item.reservationDoorStartTime }} - {{ item.reservationDoorEndTime.split(' ')[1] }}</text>
  </view>
</view>
      <!-- 上门地址 -->
      <view class="door-address">
        <view style="width: 70%">
          <view class="address_top">
            <text class="money">
              {{ item.consigneeDetailedAddress }}
            </text>
            <view> </view>
          </view>
          <view
            class="address_bottom"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <view>
              <text class="money">
                {{ item.consigneeName }}
              </text>
              <span
                style="margin: 0 16rpx; color: #1296db"
                @tap.stop="makePhone(item.consigneePhone)"
              >
                {{ item.consigneePhone }}
              </span>
            </view>
          </view>
        </view>

        <view
          class="toAddress"
          @tap.stop="
            gomapApp(
              item.consigneeLatitude,
              item.consigneeLongitude,
              item.consigneeDetailedAddress
            )
          "
        >
          <image
            src="@/static/navigation.png"
            style="width: 26rpx; height: 26rpx;"
          ></image
          ><span style="color: #1296db">导航</span>
        </view>
      </view>
      <view class="divider"></view>
      <!-- 退货状态/金额等 -->
      <view class="order-footer">
        <view class="footer-row">
          <text class="footer-label">申请数量：</text>
          <text class="footer-value">{{ item.applyRefundNum }}</text>
          <text class="footer-label ml20">申请退款：</text>
          <text class="footer-price">￥{{ item.refundPrice }}</text>
        </view>
        <view class="footer-row">
          <text class="footer-label">状态：</text>
          <text :class="['footer-status', statusColor(item.refundStatus)]">{{
            refundStatusText(item.refundStatus,item.afterSalesType)
          }}</text>
          <text v-if="item.refundTime" class="footer-label ml20"
            >退款时间：</text
          >
          <text v-if="item.refundTime" class="footer-value">{{
            item.refundTime
          }}</text>
        </view>
        <view v-if="item.refundReasonWap" class="footer-row">
          <text class="footer-label">申请理由：</text>
          <text class="footer-remark">{{ item.refundReasonWap }}</text>
        </view>
        <view
          v-if="item.refundRemark && item.refundStatus !== 1"
          class="footer-row"
        >
          <text class="footer-label">备注：</text>
          <text class="footer-remark">{{ item.refundRemark }}</text>
        </view>
        <!-- 操作按钮区，仅待审核时显示 --> 
        <!-- 配送员 -->
        <view class="action-btns-bottom" v-if="isdeliveryStaff">
          <button class="btn refuse-btn" @click.stop="onRefuse(item)" v-if="item.refundStatus === 0">
            拒绝退款
          </button>
          <button class="btn agree-btn" @click.stop="onAgree(item)" v-if="item.refundStatus === 0">
            同意退款
          </button>
          <button class="btn refuse-btn" @click.stop="makePhone(item.consigneePhone)" v-if="item.refundStatus === 8">
            联系客户
          </button>
          <button class="btn agree-btn" @click.stop="confirmToDoor(item)" v-if="item.refundStatus === 8">
            确认上门
          </button>
        </view>
        <!-- 门店 -->
        <view class="action-btns-bottom" v-else>
          <button class="btn refuse-btn" @click.stop="makePhone(item.consigneePhone)" v-if="[7,8,0].includes(item.refundStatus)">
            联系客户
          </button>
          <button class="btn refuse-btn" @click.stop="makePhone(item.deliveryPersonnelPhone)" v-if="[8,0].includes(item.refundStatus)">
            联系骑手
          </button>
          <button class="btn refuse-btn" @click.stop="markCode(item.refundOrderNo)" v-if="[7].includes(item.refundStatus)">
            扫码分配
          </button>
        </view>
      </view>
    </view>
     <uni-popup
      ref="popup"
      type="center"
      background-color="#fff"
      border-radius="10px 10px 0 0"
    >
      <img :src="codeImg" />
    </uni-popup>
    <RefuseReasonDialog
      :show="refuseDialog"
      @close="handleRefuseClose"
      @submit="handleRefuseSubmit"
      :reasons="reasons"
    />
  </view>
</template>

<script>
import { gomapApp } from "@/utils/utils";
import { confirmDoor,strToBase64Api} from "@/api";
import RefuseReasonDialog from "@/components/RefuseReasonDialog.vue";
export default {
  name: "return-list",
  components: {
    RefuseReasonDialog,
  },
  props: {
    orderList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      codeImg: '',
      refuseItem: {},
      refuseDialog: false,
      reasons: [
        "吊牌缺失 影响二次销售",
        "衣服损坏 影响二次销售",
        "尺码不合适 影响二次销售",
      ],
      afterSalesTypeMap: {
        1: "仅退款",
        2: "退货退款",
        3: "现场退货退款",
        4: "上门退货退款",
        5: "上门换货",
      },
    };
  },
  computed: {
    isdeliveryStaff() {
      return this.$store.state.app.userInfo.loginType == 1;
    },
  },
  methods: {
     /**
     *
     * 生成二维码
     */
    markCode(text) {
      strToBase64Api({
        height: "250",
        text: text,
        width: "250",
      }).then((res) => {
        this.codeImg = res.data.code;
        this.$refs.popup.open();
      });
    },
    confirmToDoor(item) {
      // this.$emit("confirmDoor", item);
      console.log(item, 216);
      confirmDoor(item.refundOrderNo).then(res => {
        console.log(res, 217);
        uni.showToast({
          title: "确认上门成功",
          icon: "success",
        });
        this.$emit("confirmDoor", item);
      });
    },
     /**
     * 拨打电话
     */
    makePhone: function (e) {
      if (!e) {
        return uni.showToast({
          title: "暂无联系方式",
          icon: "none",
        });
      }
      uni.makePhoneCall({
        phoneNumber: e,
      });
    },
    gomapApp(latitude, longitude, name) {
      gomapApp(latitude, longitude, name);
    },

    handleRefuseClose() {
      this.refuseDialog = false;
    },
    handleRefuseSubmit(reason) {
      let params = {
        operateType: 1,
        refundOrderNo: this.refuseItem.refundOrderNo,
        refuseRefundReason: reason,
      };
      this.$emit("refuseRefund", params);
      this.refuseDialog = false;
    },
    returnType(type) {
      return this.afterSalesTypeMap[type] || "未知";
    },
    goDetails(item) {
      this.$emit("goDetails", item);
    },
    onAgree(item) {
      this.$emit("agreeRefund", item);
    },
    onRefuse(item) {
      this.refuseDialog = true;
      this.refuseItem = item;
    },
    refundStatusText(status,type) {
      // 0:待审核 1:配送员拒绝 3:已退款 6:已撤销
      console.log(status,type,294);
      const map = {
		    0: {1:'商家审核中',2:'商家审核中',3:'配送员审核中',4:'配送员审核中'},
        1: "配送员拒绝",
        3: "已退款",
        6: "已撤销",
        7: "待上门",
        8: "配送员上门中",
      };
      if(status!==0){
        return map[status] || "未知";
      }else{
        return map[status][type] || "未知";
      }
    },
    statusColor(status) {
      if (status === 3) return "font_color";
      if (status === 1 || status === 6) return "hui";
      return "";
    },
    showStatusBar(item) {
      return [0, 1, 3, 6, 7].includes(item.refundStatus);
    },
    statusBarClass(item) {
      switch (item.refundStatus) {
        case 0:
          return "bar-review";
        case 1:
          return "bar-refuse";
        case 3:
          return "bar-success";
        case 6:
          return "bar-cancel";
        case 7:
          return "bar-normal";
        default:
          return "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.return-list {
  width: 92%;
  margin: 40rpx auto 0 auto;
}
.card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  margin: 32rpx auto 24rpx auto;
  padding: 24rpx 24rpx 20rpx 24rpx;
  // max-width: 480rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.order-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx 0 24rpx;
}
.order-header-left {
  flex: 1;
  min-width: 0;
}
.order-header-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.order-no {
  color: #222;
  font-size: 28rpx;
  font-weight: bold;
  word-break: break-all;
}
.action-link {
  color: #1677ff;
  font-size: 24rpx;
  margin-left: 16rpx;
  cursor: pointer;
}
.action-btns {
  display: none;
}
.action-btns-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12rpx;
  gap: 12rpx;
}
.btn {
  min-width: 90rpx;
  max-width: 40vw;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 14rpx;
  border-radius: 10rpx;
  font-size: 22rpx;
  text-align: center;
  margin: 0;
  margin-bottom: 6rpx;
  box-sizing: border-box;
  white-space: nowrap;
  flex: 0 1 auto;
  border: none;
}
.refuse-btn {
  background: #f5f5f5;
  color: #1677ff;
  border: 1rpx solid #1677ff;
}
.agree-btn {
  background: #1677ff;
  color: #fff;
}
.status-bar {
  // margin: 18rpx 24rpx 0 24rpx;
  padding: 18rpx 24rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  line-height: 1.6;
  width: calc(100%);
}
.bar-review {
  background: #fff1e9;
  color: #e67c3c;
}
.bar-success {
  background: #e3f9e9;
  color: #1ba784;
}
.bar-refuse {
  background: #fff0ed;
  color: #f56c6c;
}
.bar-cancel {
  background: #f2f2f2;
  color: #888;
}
.bar-normal {
  background: #f2f3ff;
  color: #888;
}
.order-header-row {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-bottom: 8rpx;
  padding: 0 24rpx;
}
.order-label {
  color: #888;
  min-width: 120rpx;
}
.order-value {
  color: #222;
  font-weight: 500;
  word-break: break-all;
}
.type-row {
  margin-bottom: 0;
  justify-content: flex-end;
}
.afterSalesType {
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 32rpx;
    margin-right: 8rpx;
  }
  .type-refund {
    color: #1677ff;
    font-weight: bold;
  }
  .type-return {
    color: #e93323;
    font-weight: bold;
  }
}
.ml20 {
  margin-left: 20rpx;
}
.divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 18rpx 0 0 0;
}
.goods-list {
  padding: 18rpx 24rpx 0 24rpx;
}
.goods-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
}
.goods-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  background: #f5f5f5;
  margin-right: 18rpx;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-title {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 4rpx;
}
.goods-sku {
  font-size: 22rpx;
  color: #888;
  margin-bottom: 4rpx;
}
.goods-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24rpx;
}
.goods-num {
  color: #888;
  font-size: 22rpx;
}
.goods-price {
  color: #e93323;
  font-size: 26rpx;
  font-weight: bold;
}
.order-footer {
  padding: 10rpx 24rpx 0 24rpx;
  width: 100%;
}
.footer-row {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  margin-bottom: 8rpx;
  flex-wrap: wrap;
}
.footer-label {
  color: #888;
}
.footer-value {
  color: #222;
  font-weight: 500;
  margin-right: 12rpx;
}
.footer-price {
  color: #e93323;
  font-size: 26rpx;
  font-weight: bold;
  margin-left: 4rpx;
}
.footer-status {
  font-weight: bold;
  margin-left: 4rpx;
}
.font_color {
  color: #1677ff !important;
}
.hui {
  color: #cccccc !important;
}
.footer-remark {
  color: #888;
  font-size: 22rpx;
}
.noCart {
  margin-top: 32%;
}
.pictrue image {
  width: 120rpx;
  height: 120rpx;
}
.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}
.door-address {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f7f8fa;
  border-radius: 10rpx;
  padding: 18rpx 18rpx 14rpx 18rpx;
  margin: 18rpx 0 0 0;
}
.address_top {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 8rpx;
  word-break: break-all;
}
.address_bottom {
  font-size: 24rpx;
  color: #666;
  display: flex;
  align-items: center;
  margin-top: 6rpx;
}
.money {
  color: #333;
  font-weight: 500;
}
.toAddress {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 16rpx;
  background: #eaf6ff;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  transition: background 0.2s;
}
.toAddress:hover {
  background: #d0eaff;
}
.toAddress image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  margin-left: 0;
}
.toAddress span {
  color: #1296db;
  font-size: 24rpx;
  font-weight: 500;
}
.door-time {
  width: 100%;
  background: #f7f8fa;
  border-radius: 10rpx;
  padding: 14rpx 24rpx 10rpx 24rpx;
  margin: 12rpx 0 0 0;
  display: flex;
  align-items: center;
}
.door-time-item {
  display: flex;
  align-items: center;
}
.door-time-label {
  color: #888;
  font-size: 24rpx;
  font-weight: 500;
  margin-right: 8rpx;
}
.door-time-value {
  color: #222;
  font-size: 24rpx;
  font-weight: 600;
}
</style>
